<script setup>

import {ArrowUp, Plus,Close} from "@element-plus/icons-vue";
import {ref} from "vue";
const checkboxGroup1 = ref(['v.2']);

const verbs = ['v.1', 'v.2', 'v.3', 'v.4', 'v.5'];
</script>

<template>
  <div class="buttonsTest">
    <div>

      <el-button-group>
        <el-button size="small" disabled plain>v.1</el-button>
        <el-button type="primary" size="small" plain :icon="ArrowUp"></el-button>
        <el-button type="primary" size="small" plain :icon="Plus"></el-button>
        <!--          <el-icon><ArrowUpBold /></el-icon>-->
        <!--        <el-button type="primary" size="small" :icon="Edit" />-->
      </el-button-group>
    </div>

    <br/>
    <div class="my-button-group">
      <button class="my-button">v.1</button>
      <button class="my-button">
        <el-icon>
          <ArrowUp/>
        </el-icon>
      </button>
      <button class="my-button">
        <el-icon>
          <Plus/>
        </el-icon>
      </button>
    </div>
    <br/>
    <div class="my-button-group">
      <button class="my-button">v.2</button>
      <!--        <button class="my-button"><el-icon><ArrowUp /></el-icon></button>-->
      <!--        <button class="my-button"><el-icon><Plus /></el-icon></button>-->
      <button class="my-button">
        <el-icon>
          <Close/>
        </el-icon>
      </button>
    </div>
    <br/>

    <span class="my-button-group">
        <button class="my-button">v.2</button>
      <!--        <button class="my-button"><el-icon><ArrowUp /></el-icon></button>-->
      <!--        <button class="my-button"><el-icon><Plus /></el-icon></button>-->
        <button class="my-button"><el-icon><Plus/></el-icon></button>
      </span>
    &nbsp;
    <span class="my-button-group">
        <button class="my-button">v.3</button>
      <!--        <button class="my-button"><el-icon><ArrowUp /></el-icon></button>-->
      <!--        <button class="my-button"><el-icon><Plus /></el-icon></button>-->
        <button class="my-button"><el-icon><Plus/></el-icon></button>
      </span>
    &nbsp;
    <span class="my-button-group">
        <button class="my-button">v.4</button>
      <!--        <button class="my-button"><el-icon><ArrowUp /></el-icon></button>-->
      <!--        <button class="my-button"><el-icon><Plus /></el-icon></button>-->
        <button class="my-button"><el-icon><Plus/></el-icon></button>
        <button class="my-button"><el-icon><Close/></el-icon></button>
      </span>
    <br/>

    <br>
    <el-checkbox-group v-model="checkboxGroup1" size="small">
      <el-checkbox-button v-for="verb in verbs" class="myclassaa" :label="verb" :key="verb">{{ verb }}
      </el-checkbox-button>
      <button class="my-button"><el-icon><Plus/></el-icon></button>
      <button class="my-button"><el-icon><Close/></el-icon></button>
    </el-checkbox-group>
    <br>
    <span class="my-button-group">
        <label class="my-button" style="font-size: 12px">v.3</label>
      <!--        <button class="my-button"><el-icon><ArrowUp /></el-icon></button>-->
      <!--        <button class="my-button"><el-icon><Plus /></el-icon></button>-->
        <button class="my-button"><el-icon><Plus/></el-icon></button>
      </span>

    <div>
      <button>sdfjlk</button>
      <br/>
      sdfljsljflsdjf dsfsdf sf sd fsdf sd
    </div>
  </div>

</template>

<style scoped>
.buttonsTest .el-button.is-disabled, .buttonsTest .el-button.is-disabled:focus, .buttonsTest .el-button.is-disabled:hover {
  color: #181818;
  padding: 5px 15px;
  //--el-button-border-color: var(--el-color-primary);
  border-color: var(--el-color-primary-light-5);
  //border-left-color:var(--el-color-primary-light-5);
}

.buttonsTest .el-button-group .el-button--primary:last-child {
  border-left-color: var(--el-color-primary-light-5);
}

:global(:root .buttonsTest .el-button--primary:not(:first-child):not(:last-child)) {
  border-left-color: var(--el-color-primary-light-5);
}


.buttonsTest .el-button--primary.is-plain {
  padding: 5px 3px;
}
</style>

<style scoped>
.el-checkbox-button.myclassaa :deep(.el-checkbox-button__inner) {
  //--el-border: 1px solid var(--el-checkbox-button-checked-border-color);
}

.myclassaa:first-child :deep(.el-checkbox-button__inner) {
  //--el-border: 1px solid var(--el-checkbox-button-checked-border-color);
  border-left: 1px solid var(--el-checkbox-button-checked-border-color);
  border-top: 1px solid var(--el-checkbox-button-checked-border-color);
  border-bottom: 1px solid var(--el-checkbox-button-checked-border-color);
  //border-top-left-radius: var(--el-border-radius-base);
  //border-bottom-left-radius: var(--el-border-radius-base);
  //box-shadow: none!important;
}

.myclassaa:last-child :deep(.el-checkbox-button__inner) {
  border-right: 1px solid var(--el-checkbox-button-checked-border-color);
  //border-right: 1px solid var(--my-color-group1-light-1);
  border-top: 1px solid var(--el-checkbox-button-checked-border-color);
  border-bottom: 1px solid var(--el-checkbox-button-checked-border-color);
}

.myclassaa :deep(.el-checkbox-button__inner) {
  border-top: 1px solid var(--el-checkbox-button-checked-border-color);
  //border-top: 1px solid var(--my-color-group1-light-2);
  border-bottom: 1px solid var(--el-checkbox-button-checked-border-color);
  //border-bottom: 1px solid var(--my-color-group1-light-2);
  //border-left: 1px solid var(--el-checkbox-button-checked-border-color);
  //border-right: 1px solid var(--el-checkbox-button-checked-border-color);
  height: 17px;
  padding: 1px 10px;
}

.myclassaa.is-focus :deep(.el-checkbox-button__inner) {
  border-left: var(--el-border);
  border-right: var(--el-border);
  //border-color: #dcdfe6;
  //border:var(--el-border);
}

.myclassaa.is-focus:first-child :deep(.el-checkbox-button__inner) {
  border-left: 1px solid var(--el-checkbox-button-checked-border-color);
}

.myclassaa.is-focus:last-child :deep(.el-checkbox-button__inner) {
  border-right: 1px solid var(--el-checkbox-button-checked-border-color);
}
</style>

<style scoped>
.my-button-group>.my-button:not(:first-child):not(:last-child) {
  border-radius: 0;
  //border-left-color: rgba(255,255,255,0.5);
  //border-right-color: rgba(255,255,255,0.5);
  cursor: pointer;
}

.my-button-group>.my-button:not(:last-child) {
  margin-right: -1px;
}

.my-button-group>.my-button:not(:first-child) {
  background-color: #ecf5ff;
}

.my-button-group>.my-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: rgba(255, 255, 255, 0.5);
  //cursor: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  padding: 5px 10px;
}

.my-button-group>.my-button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  cursor: pointer;
  //border-left-color: #a0cfff;
}

.my-button-group>.my-button:not(:first-child):hover {
  background-color: #409eff;
  color: #ffffff;

}

.my-button-group>.my-button:not(:first-child):active {
  background-color: #337ecc;
  color: #ffffff;
}

.my-button-group>.my-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  //cursor: pointer;
  color: var(--el-button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: .1s;
  font-weight: var(--el-button-font-weight);
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  --el-button-bg-color: #ffffff;
  background-color: var(--el-button-bg-color);
  border: var(--el-border);
  //border-color: var(--el-button-border-color);
  border-color: #a0cfff;
  border-radius: 3px;
  padding: 5px 1px;
  height: 18px;
}
</style>

<style scoped>
.el-checkbox-group>.my-button:not(:first-child):not(:last-child) {
  border-radius: 0;
  //border-left-color: rgba(255,255,255,0.5);
  //border-right-color: rgba(255,255,255,0.5);
  cursor: pointer;
}

.el-checkbox-group>.my-button:not(:last-child) {
  margin-right: -1px;
}

.el-checkbox-group>.my-button:not(:first-child) {
  background-color: #ecf5ff;
}

.el-checkbox-group>.my-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: rgba(255, 255, 255, 0.5);
  //cursor: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  padding: 5px 10px;
}

.el-checkbox-group>.my-button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  cursor: pointer;
  //border-left-color: #a0cfff;
}

.el-checkbox-group>.my-button:not(:first-child):hover {
  background-color: #409eff;
  color: #ffffff;

}

.el-checkbox-group>.my-button:not(:first-child):active {
  background-color: #337ecc;
  color: #ffffff;
}

.el-checkbox-group>.my-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  //cursor: pointer;
  color: var(--el-button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: .1s;
  font-weight: var(--el-button-font-weight);
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  background-color: var(--el-button-bg-color);
  border: var(--el-border);
  //border-color: var(--el-button-border-color);
  border-color: #a0cfff;
  border-radius: 3px;
  padding: 5px 1px;
  height: 17px;
}
</style>